<!-- src/views/company/ProfileReview.vue -->
<template>
  <div class="profile-review">
    <div class="review-container">
      <el-card class="review-card">
        <template #header>
          <div class="card-header">
            <h2>提交审核</h2>
          </div>
        </template>

        <div class="review-content">
          <el-alert
            title="请确认以下企业信息"
            type="info"
            description="提交后，管理员将对您的企业信息进行审核，审核通过后即可发布实习岗位"
            show-icon
            class="info-alert"
          />

          <el-descriptions :column="2" border class="profile-info">
            <el-descriptions-item label="企业名称">{{ profile.name }}</el-descriptions-item>
            <el-descriptions-item label="统一社会信用代码">{{ profile.unifiedCode }}</el-descriptions-item>
            <el-descriptions-item label="法人代表">{{ profile.legalPerson }}</el-descriptions-item>
            <el-descriptions-item label="注册资本">{{ formatCurrency(profile.registeredCapital) }} 元</el-descriptions-item>
            <el-descriptions-item label="成立日期">{{ profile.establishmentDate }}</el-descriptions-item>
            <el-descriptions-item label="联系人">{{ profile.contactPerson }}</el-descriptions-item>
            <el-descriptions-item label="联系电话">{{ profile.contactPhone }}</el-descriptions-item>
            <el-descriptions-item label="联系邮箱">{{ profile.contactEmail }}</el-descriptions-item>
            <el-descriptions-item label="企业网址">{{ profile.website || '无' }}</el-descriptions-item>
            <el-descriptions-item label="企业地址" :span="2">{{ profile.address }}</el-descriptions-item>
            <el-descriptions-item label="经营范围" :span="2">{{ profile.businessScope }}</el-descriptions-item>
            <el-descriptions-item label="企业简介" :span="2">{{ profile.introduction }}</el-descriptions-item>
          </el-descriptions>

          <div class="actions">
            <el-button @click="goBack">返回修改</el-button>
            <el-button type="primary" @click="submitForReview" :loading="submitLoading">
              提交审核
            </el-button>
          </div>
        </div>
      </el-card>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useCompanyStore } from '../../store/company'
import { ElMessage, ElMessageBox } from 'element-plus'

const router = useRouter()
const companyStore = useCompanyStore()

const profile = ref({})
const submitLoading = ref(false)

// 获取企业信息
const fetchProfile = async () => {
  try {
    const data = await companyStore.fetchProfile()
    profile.value = data
  } catch (error) {
    ElMessage.error('获取企业信息失败')
  }
}

// 格式化金额
const formatCurrency = (amount) => {
  if (!amount) return '0.00'
  return parseFloat(amount).toLocaleString('zh-CN', {
    minimumFractionDigits: 2,
    maximumFractionDigits: 2
  })
}

// 返回修改
const goBack = () => {
  router.push('/company/profile-setup')
}

// 提交审核
const submitForReview = () => {
  ElMessageBox.confirm(
    '确定要提交企业信息进行审核吗？提交后将无法修改信息，直到审核完成。',
    '提交审核',
    {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }
  ).then(async () => {
    submitLoading.value = true
    try {
      await companyStore.submitForReview()
      ElMessage.success('提交审核成功，请等待管理员审核')
      router.push('/company/dashboard')
    } catch (error) {
      ElMessage.error(error.message || '提交审核失败')
    } finally {
      submitLoading.value = false
    }
  }).catch(() => {
    // 用户取消操作
  })
}

onMounted(() => {
  fetchProfile()
})
</script>

<style scoped>
.profile-review {
  height: 100%;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.review-container {
  width: 100%;
  max-width: 1000px;
  padding: 20px;
}

.review-card {
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.card-header {
  text-align: center;
}

.card-header h2 {
  margin: 0;
  color: #303133;
}

.info-alert {
  margin-bottom: 20px;
}

.profile-info {
  margin-bottom: 30px;
}

.actions {
  display: flex;
  justify-content: center;
  gap: 20px;
}
</style>
